<template>
  <div class="pagestyle">
    <list_controller ref="zujianname" :options="state.options" :noprintDownShow="true">
      <template v-slot:opraCurdBtnlist="row">
        <span>
          <el-button type="primary" link size="small" @click="lookBtn(row.row.row)">控制</el-button>
          <el-button type="primary" link size="small" @click="editBtn(row.row.row)">编辑</el-button>
          <el-button type="primary" link size="small" @click="deleteBtn(row.row.row)">删除</el-button>
        </span>
      </template>
      <template v-slot:opraCurdBtnAll>
        <span v-if="userStore.modify" :class="state.addModal ? 'listInfoBtn active' : 'listInfoBtn'"
          @click="addBtn('mul')">
          <svg-icon :class="state.addModal ? 'active' : ''" class-name="search-icon" icon-class="xinzeng" />
          新增
        </span>
        <span v-if="userStore.modify" :class="'listInfoBtn'" @click="deleteBtn('mul')">
          <svg-icon class-name="search-icon" icon-class="shanchu" />
          删除
        </span>
      </template>
      <template v-slot:selectNamelist> 电源充放电管理 </template>
      <template v-slot:listSS="{ row, field }">
        <span v-if="field == 'batteryId'">
          <span v-for="item in state.TimeList">
            <span v-if="row.batteryId==item.id">
              {{  item.powerName }}
            </span>
          </span>
        </span>
        <span v-if="field == 'powerNo'">
          {{ row.powerNo==1?'一号电源':row.powerNo==2?'二号电源':'三号电源' }}
        </span>
      </template>
    </list_controller>
    <!-- 新增弹框 -->
    <teleport to="body">
      <vxe-modal esc-closable destroy-on-close :lock-view="false" :width="660" :height="auto" v-model="state.addModal"
        resize :mask="true" showFooter>
        <template #title>
          <div class="w100 h100 fsc mask_title">{{ state.modalTitle }}</div>
        </template>
        <template #default>
          <div class="form_box">
            <el-form ref="formRef" :model="state.formData" :rules="state.rules" label-position="top">
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item label="电源名称" prop="batteryId">
                    <el-select clearable filterable v-model="state.formData.batteryId" placeholder="请选择">
                      <el-option v-for="item in state.TimeList" :key="item.id" 
                      :label="item.powerName" :value="item.id">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="电源号" prop="powerNo">
                    <el-select clearable filterable v-model="state.formData.powerNo" placeholder="请选择">
                      <el-option v-for="item in [{
                          value:1,
                          label:'一号电源'
                        },{
                          value:2,
                          label:'二号电源'
                        },{
                          value:3,
                          label:'三号电源'
                        }]" :key="item.value" :label="item.label" :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="上次操作状态" prop="lastOperationStatus">
                    <el-select filterable v-model="state.formData.lastOperationStatus" placeholder="请选择">
                      <el-option v-for="item in ['充电','放电']" :key="item" :label="item" :value="item">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="上次操作时间" prop="lastOperationTime">
                    <el-date-picker placeholder="请选择" v-model="state.formData.lastOperationTime" 
                    value-format="YYYY-MM-DD"
                      type="date">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <!-- <el-col :span="8">
                  <el-form-item label="下次操作状态" prop="nextOperationStatus">
                    <el-select filterable v-model="state.formData.nextOperationStatus" placeholder="请选择">
                      <el-option v-for="item in ['充电','放电']" :key="item" :label="item" :value="item">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="下次操作时间" prop="nextOperationTime">
                    <el-date-picker placeholder="请选择" v-model="state.formData.nextOperationTime" value-format="YYYY-MM-DD HH:mm:ss"
                      type="datetime" >
                    </el-date-picker>
                  </el-form-item>
                </el-col> -->
                <el-col :span="8">
                  <el-form-item label="间隔时间(天)" prop="intervalDay">
                    <el-input oninput="value=value.replace(/[^\d]/g,'')" v-model="state.formData.intervalDay" placeholder="请输入"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </template>
        <template #footer>
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="submitForm"> 确定 </el-button>
        </template>
      </vxe-modal>
    </teleport>
    <!-- 详情 -->
    <el-drawer v-model="state.drawerShow" direction="rtl" size="40%" close-on-click-modal :modal="true">
      <template #header="{ close, titleId, titleClass }">
        <h4 class="mask_sub_title">
          <svg-icon class-name="search-icon" icon-class="biaotitubiao" /><span>电源详情</span>
        </h4>
      </template>
      <p class="drawer_sub_title">
        <span class="sub_title_line">基础信息</span>
      </p>
      <div>
        <el-row :gutter="20" style="
            background: rgba(91, 109, 128, 0.04);
            display: flex;
            align-items: center;
            padding: 20px 0;
          ">
          <el-col :span="6">
            <p>电源名称</p>
            <p>{{ state.formData.powerName }}</p>
          </el-col>
          <el-col :span="6">
            <p>电源类型</p>
            <p>{{ state.formData.powerTypeName }}</p>
          </el-col>
          <el-col :span="6">
            <p>时间门限</p>
            <p>{{ state.formData.timeThreshold }}小时</p>
          </el-col>
          <el-col :span="6">
            <p>容量门限</p>
            <p>{{ state.formData.capacityThreshold }}</p>
          </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-top: 10px">
          <el-col :span="13">
            <p class="drawer_sub_title">
              <span class="sub_title_line">关联分站</span>
            </p>
            <vxe-table height="200" :data="state.formData.stationBasicDtoList" border="inner">
              <vxe-column type="seq" :width="55" title="序号"></vxe-column>
              <vxe-column title="编号" field="aree"></vxe-column>
              <vxe-column title="名称" field="aree"></vxe-column>
              <vxe-column title="安装地点" field="aree"></vxe-column>
            </vxe-table>
          </el-col>
          <el-col :span="11">
            <p class="drawer_sub_title">
              <span class="sub_title_line">关联测点</span>
            </p>
            <vxe-table height="200" :data="state.formData.stationBasicDtoList" border="inner">
              <vxe-column type="seq" :width="55" title="序号"></vxe-column>
              <vxe-column title="测点号" field="aree"></vxe-column>
              <vxe-column title="测点名称" field="aree"></vxe-column>
              <vxe-column title="安装地点" field="aree"></vxe-column>
            </vxe-table>
          </el-col>
        </el-row>
      </div>
    </el-drawer>
  </div>
</template>
<script setup>
  import list_controller from "@/components/commonCom/list_controller";
  import {
    computed,
    reactive
  } from "vue";
    import {
    ElMessage,
    ElMessageBox
  } from 'element-plus'
  import {
    table_headers
  } from "@/components/commonCom/table_headers";
  import axios from "@/utils/request";
  import usePagesStore from "@/store/modules/pages";
  import {
    getsubstationmodel,
    searchgetTimeList,
    searchgetCapacityList,
    searchgetPowerTypeList,
  } from "@/api/config";
  import useUserStore from "@/store/modules/user";
  const userStore = useUserStore();
  const {
    proxy
  } = getCurrentInstance();
  const store = usePagesStore();

  components: {
    list_controller;
  }
  const upload = ref(null);
  let state = reactive({
    options: {
      tableheads: computed(() => table_headers.batteryChargeManagement),
      listSS: [{
          field: "batteryId"
        },
        {
          field: "powerNo"
        }
      ],
      queryList: {
        dropdownUrl: "",
        querys: [],
        queryMap: new Map([
          ["sensorTypeId", "safety_pointType"],
          ["deviceTypeId", "safety_deviceType"],
          ["alarmTypeId", "alarmType"],
        ]),
      },
      dataUrl: "/battery/charge/list",
      delUrl: "/battery/charge/del",
      addUrl: "/battery/charge/addBatteryChargeManagement",
      descUrl: "/battery/charge/getById",
      editUrl: "/battery/charge/modifyBatteryChargeManagement",
    },
    // 表单
    addModal: false,
    modalTitle: "新增电源",
    drawerShow: false,
    formRef: null,
    formData: {},
    rules: {
      intervalDay: [{
        required: true,
        message: "请输入间隔时间",
        trigger: "blur",
      }],
      nextOperationTime: [{
        required: true,
        message: "请选择下次操作时间",
        trigger: "change",
      }],
      nextOperationStatus: [{
        required: true,
        message: "请选择下次操作状态",
        trigger: "change",
      }, ],
      lastOperationTime: [{
        required: true,
        message: "请选择上次操作时间",
        trigger: "change",
      }],
      lastOperationStatus: [{
        required: true,
        message: "请选择上次操作状态",
        trigger: "change",
      }],
      powerNo: [{
        required: true,
        message: "请选择电源号",
        trigger: "change",
      }],
      batteryId: [{
        required: true,
        message: "请选择电源名称",
        trigger: "change",
      }],
    },
    editId: undefined,
    PowerTypeList: [],
    TimeList: [],
    CapacityList: [],
    options1: {
      tableheads: computed(() => table_headers.quoteStation),
      queryList: {
        autoSearch: true,
        dropdownUrl: "",
        stationCode: "",
        stationTypeId: "",
        querys: [{
          field: "stationCode",
          title: "编号",
          type: "input",
          binddata: "",
        }, ],
        queryMap: new Map([
          ["sensorTypeId", "safety_pointType"],
          ["deviceTypeId", "safety_deviceType"],
          ["alarmTypeId", "alarmType"],
        ]),
      },
      dataUrl: "/substation/type/quote",
    },
  });
  // 查看按钮
  function lookBtn(row) {
    state.drawerShow = true;
    axios
      .post(state.options.descUrl, {
        id: row.id,
      })
      .then((res) => {
        if (res.code == 200) {
          state.formData = res.data.list[0];
          state.options1.queryList.stationTypeId = res.data.id;
        }
      });
  }

  function yinyonClick() {
    axios
      .post("/substation/type/quote", {
        stationTypeId: state.options1.queryList.stationTypeId,
        stationCode: state.options1.queryList.stationCode,
      })
      .then((res) => {
        if (res.code == 200) {
          state.formData.stationBasicDtoList = res.data.list;
        }
      });
  }
  // 新增按钮
  function addBtn(row) {
    state.modalTitle = "新增电源";
    state.addModal = true;
    state.formData = {};
    state.editId = undefined;
  }
  // 编辑按钮
  function editBtn(row) {
    state.modalTitle = "编辑电源";
    state.addModal = true;
    axios
      .post(state.options.descUrl, {
        id: row.id,
      })
      .then((res) => {
        if (res.code == 200) {
          state.formData = res.data;
          state.editId = res.data.id;
        }
      });
  }

  function deleteBtn(row) {
    let ids = [];
    if (row != "mul") {
      ids = [row.id];
    } else {
      if (store.records.length > 0) {
        ids = store.records.map((item) => {
          return item.id;
        });
      } else {
        proxy.$modal.msgSuccess("请先勾选所要删除数据!");
      }
    }
 if (ids.length > 0) {
      ElMessageBox.confirm(
          '确定要删除该数据吗?',
          '温馨提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
        )
        .then(() => {
          axios.post(state.options.delUrl, ids).then(res => {
            if (res.code == 200) {
              proxy.$refs['zujianname'].getData()
              state.addModal = false
              ElMessage({
                type: 'success',
                message: res.msg,
              })
              store.records = []
            }
          })

        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: '删除取消',
          })
        })
    }
  }
  /** 提交按钮 */
  function submitForm() {
    proxy.$refs["formRef"].validate((valid) => {
      if (valid) {
        if (state.editId) {
          state.formData.id = state.editId;
          axios.post(state.options.editUrl, state.formData).then((res) => {
            if (res.code == 200) {
              proxy.$refs["zujianname"].getData();
              state.addModal = false;
              proxy.$modal.msgSuccess(res.msg);
            }
          });
        } else {
          axios.post(state.options.addUrl, state.formData).then((res) => {
            if (res.code == 200) {
              proxy.$refs["zujianname"].getData();
              state.addModal = false;
              proxy.$modal.msgSuccess(res.msg);
            }
          });
        }
      }
    });
  }

  function cancel() {
    state.addModal = false;
  }
  // 获取下拉选接口
  // 时间门限
  function getselList() {
    axios.post('/power/supply/search', {}).then(res => {
      state.TimeList=res.data.list
    })
  }
  getselList();
</script>
<style lang="scss" scoped>
  ::v-deep .el-drawer {
    .querycss {
      .fsc {
        &:nth-child(2) {
          display: none;
        }
      }
    }

    .table_box {
      .fsc {
        display: none;
      }
    }
  }
</style>